<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery 事件源【4种  15种】</title>
		<!-- 事件源  针对元素 触发效果 
		1. 鼠标事件【5种 前期必须掌握】
		  1.click()  ;  当元素单机时候触发
		  2.dblclick()  当元素被双击时触发
		  3.mouseenter() 当鼠标指针一如元素区域时候触发  触发概率低  【tab 选项卡】
		  4.mouseleave()  当鼠标指针移出元素区域时候触发  触发概率低  【tab 选项卡】
		  5.mousemove（）  当指针在元素移动时  触发效果  触发效率高{ 绘画   获取坐标}
		2.键盘事件【3种，页面小游戏  】
		3.表单事件【4种   后台和前台交互 】form元素   input元素
		1.focus();针对input元素   当元素获取焦点时候触发
		2.blur() ; 针对input元素，当元素数去焦点时触发
		4.文档/窗口事件 【3种  页面 页面加载】  吸顶灯效果
		-->
		<script src="MI/js/jquery-1.11.1.js"></script>
		<style>
			
			div{
				width:200px ;
				height: 200px;
				background:#ff0 ;
				text-align:center;
				line-height:200px ;
				border:50px solid #f00 ;
				border-left-color:#0055ff ;
				border-right-color: #005500;
				border-top-color: aqua;
				border-bottom-color:#aa5500 ;
			}
		</style>
		
	</head>
	<body>
		<h1>鼠标触发事件</h1>
		<button class="btn1">鼠标点击时</button>
		<button id="btn2">鼠标双击</button>
		<!-- css  200*200  文字居中垂直显示   外边距50像素   并且  四个边颜色不同 -->
		<div><span>鼠标移入和移出</span></div>
		<h1>表单触发事件</h1>
		<input type="text" />
		<script>
			//不用元素选则器=，类选择器 ，id选择器  抓到input 元素
			//jq工厂函数抓取元素 ,通过属性和属性值
		/* 	$("input[type='text']").focus(function(){
				alert("获取")
			
			});
			 */
			$("input[type='text']").blur(function(){
				alert("失去焦点")
				
			});
			
			
			//1.鼠标单积
			/* $('.btn1').click(function(){
				document.write("<marquee>跑马灯........</marrquee>");
				
				
			}); */
			//2.鼠标双击
			/* $('#btn2').dblclick(function(){
				alert("我被双击了");
				
			});
			//3 鼠标移入
			$('div').mouseenter( function(){
				alert("移入啦-");
				
			});
			 */
			/* //4鼠标移出
			$("div span ").mouseleave(function(){
				document.write("<h1>鼠标移出啦</h1>")
				
			}); */
			//5.鼠标跟随   移动鼠标园区位置   绘画 页面位置  下=x值  y值
			$("div").mousemove(function(e){
				alert("div区域x值："+e.pageX+"div区域y值："+e.pageY  );
				
				
			});
			
			
		</script>
		
	</body>
</html>   